<template>
  <div class="cron" :val="value_">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="秒" name="s">
        <second-and-minute v-model="sVal" lable="秒"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="分" name="m">
        <second-and-minute v-model="mVal" lable="分"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <hour v-model="hVal" lable="时"></hour>
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <day v-model="dVal" lable="日"></day>
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <month v-model="monthVal" lable="月"></month>
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <week v-model="weekVal" lable="周"></week>
      </el-tab-pane>
      <!-- <el-tab-pane label="年" name="year">
        <year v-model="yearVal" lable="年"></year>
      </el-tab-pane> -->
    </el-tabs>
    <!-- table -->

    <el-table :data="tableData" size="mini" border style="width: 482px">
      <el-table-column prop="sVal" label="秒" width="80px"> </el-table-column>
      <el-table-column prop="mVal" label="分" width="80px"> </el-table-column>
      <el-table-column prop="hVal" label="时" width="80px"> </el-table-column>
      <el-table-column prop="dVal" label="日" width="80px"> </el-table-column>
      <el-table-column prop="monthVal" label="月" width="80px">
      </el-table-column>
      <el-table-column prop="weekVal" label="周" width="80px">
      </el-table-column>
      <!-- <el-table-column
         prop="yearVal"
         label="年">
       </el-table-column> -->
    </el-table>
    <br />
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div class="bottom-cron">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="change">保存</el-button>
    </div>
  </div>
</template>

<script>
import SecondAndMinute from "./cron/secondAndMinute";
import hour from "./cron/hour";
import day from "./cron/day";
import month from "./cron/month";
import week from "./cron/week";
import year from "./cron/year";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeName: "s",
      sVal: "0",
      mVal: "0/30",
      hVal: "*",
      dVal: "*",
      monthVal: "*",
      weekVal: "?",
      errorMessage: "",
      // yearVal: "",
    };
  },
  watch: {
    value(a, b) {
      this.updateVal();
    },
  },
  computed: {
    tableData() {
      return [
        {
          sVal: this.sVal,
          mVal: this.mVal,
          hVal: this.hVal,
          dVal: this.dVal,
          monthVal: this.monthVal,
          weekVal: this.getTmpWeekVal(),
          // yearVal: this.yearVal,
        },
      ];
    },
    value_() {
      if (!this.dVal && !this.weekVal) {
        return "";
      }
      if (this.dVal === "?" && this.weekVal === "?") {
        this.errorMessage = "日与周不可以同时为“不指定”";
        return;
        // this.$message.error("日期与星期不可以同时为“不指定”");
      }
      if (this.dVal !== "?" && this.weekVal !== "?") {
        this.errorMessage = "日与周必须有一个为“不指定”";
        return;
        // this.$message.error("日期与星期必须有一个为“不指定”");
      }
      this.errorMessage = "";
      // let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`;

      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${
        this.monthVal
      } ${this.getTmpWeekVal()}`;
      if (v !== this.value) {
        this.$emit("input", v);
      }
      return v;
    },
  },
  methods: {
    getTmpWeekVal() {
      let tmpWeekVal = 0;
      if (this.weekVal.split("-").length === 2) {
        let start = +this.weekVal.split("-")[0];
        let end = +this.weekVal.split("-")[1];
        if (start === 7) start = 0;
        if (end === 7) end = 0;
        tmpWeekVal = start + 1 + "-" + (end + 1);
      } else if (this.weekVal.split("/").length === 2) {
        let start = +this.weekVal.split("/")[0];
        let end = +this.weekVal.split("/")[1];
        if (start === 7) start = 0;
        tmpWeekVal = start + 1 + "/" + end;
      } else if (this.weekVal.split("#").length === 2) {
        let start = +this.weekVal.split("#")[0];
        let end = +this.weekVal.split("#")[1];
        if (end === 7) end = 0;
        tmpWeekVal = start + "#" + (end + 1);
      } else if (this.weekVal.split("L").length === 2) {
        let start = +this.weekVal.split("L")[0];
        if (start === 7) start = 0;
        tmpWeekVal = start + 1 + "L";
      } else {
        tmpWeekVal = this.weekVal;
      }
      return tmpWeekVal;
    },

    getDialogWeekVal(val) {
      let tmpWeekVal = 0;
      if (val.split("-").length === 2) {
        let start = +val.split("-")[0];
        let end = +val.split("-")[1];
        if (start === 1) start = 8;
        if (end === 1) end = 8;
        tmpWeekVal = start - 1 + "-" + (end - 1);
      } else if (val.split("/").length === 2) {
        let start = +val.split("/")[0];
        let end = +val.split("/")[1];
        if (start === 1) start = 8;
        tmpWeekVal = start - 1 + "/" + end;
      } else if (val.split("#").length === 2) {
        let start = +val.split("#")[0];
        let end = +val.split("#")[1];
        if (end === 1) end = 8;
        tmpWeekVal = start + "#" + (end - 1);
      } else if (val.split("L").length === 2) {
        let start = +val.split("L")[0];
        if (start === 1) start = 8;
        tmpWeekVal = start - 1 + "L";
      } else {
        tmpWeekVal = val;
      }
      return tmpWeekVal;
    },
    change() {
      if (this.errorMessage) {
        return;
      }
      this.$emit("change", this.value_);
    },
    close() {
      this.$emit("close");
    },
    updateVal() {
      if (!this.value) {
        return;
      }
      let arrays = this.value.split(" ");
      this.sVal = arrays[0];
      this.mVal = arrays[1];
      this.hVal = arrays[2];
      this.dVal = arrays[3];
      this.monthVal = arrays[4];
      this.weekVal = this.getDialogWeekVal(arrays[5]);
      // this.yearVal = arrays[6];
    },
  },
  created() {
    this.updateVal();
  },
  components: {
    SecondAndMinute,
    hour,
    day,
    month,
    week,
    year,
  },
};
</script>

<style lang="scss">
.cron {
  text-align: left;
  padding: 6px;
  background: #fff;
  // border: 1px solid #dcdfe6;
  // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  .el-table td {
    height: 23px !important;
  }
}

.error-message {
  color: red;
}
.bottom-cron {
  width: 100%;
  text-align: right;
  margin-top: 5px;
  position: relative;
}
</style>
